@config.main("Medicago sativa and Medicago truncatula_MD_SD") {
  <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("mscroll/css/lz_index.css")">



  <div class="body-box">
    <div class="page-box">

      @config.subTitle("Medicago sativa and Medicago truncatula_MD_SD")

      <div class="main-body">
        @components.scrollComponents("Table S1 Relative concentration and fold changes of major metabolites in roots of NI control (A) and NI six days after alkali treatment (A1)" ) {
       <div style="width: 100%">

          <table id="table1" data-pagination="true" data-advanced-sortable="true"
          data-page-list="[10]"  >

          </table>
       </div>

        }

        @components.scrollComponents("Table S2 Relative concentration and fold changes of major metabolites in roots of RI control (B) and RI six days after alkali stress (B1)" ) {
          <div style="width: 100%">

          <table id="table2" data-pagination="true" data-advanced-sortable="true"
          data-page-list="[10]"  >
          </table>
          </div>
            }

        @components.scrollComponents("Table S3 Relative concentration and fold changes of major metabolites in roots of NI control (A) and RI control (B)" ) {
          <div style="width: 100%">
          <table id="table3" data-pagination="true" data-advanced-sortable="true"
          data-page-list="[10]"  >

          </table></div>
        }

        @components.scrollComponents("Table S4 Relative concentration and fold changes of major metabolites in roots of NI six days after alkali treatment (A1) and RI six days after alkali stress (B1) " ) {
          <div style="width: 100%">
          <table id="table4" data-pagination="true" data-advanced-sortable="true"
          data-page-list="[10]"  >

          </table></div>
        }

      </div>
    </div>
  </div>
  <script src="@routes.Assets.versioned("mscroll/js/mscroll.js")" type="text/javascript"></script>


  <script>

          $(function (){
            $.post("@routes.MetaController.getRiNiAlkData()",(data)=>{

              $.each(data,(i,v)=>{
                let columns = []
                $.each(v.header,(i1,v1)=>{
                  columns.push(
                          {
                            field:`${i1}`,
                            title:v1
                          }
                  )
                })

                $("#table" + i).bootstrapTable({
                  data:v.data,
                  columns:columns
                })
              })



            })

          })


  </script>

}


